<template>
  <div>
    <p>商品详情（动态路由版）</p>
    <!-- params就是问号前的数据 -->
    <!-- query就是问号后的数据 -->
    <!-- 动态路由的使用场景：结构相似，数据不同，大量重复。商品详情、歌曲播放页、个人中心... -->
    <p>商品名称：{{name}}</p>
    <p>商品价格：{{price}}</p>
    <router-link to="/goodsdetail/oneplus/5599">一加手机就是好！！！</router-link>
    <button @click="go()">一加手机</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      price: ''
    }
  },
  created() {
    // 组件复用了，使得钩子函数不会再次执行
    console.log('我要发请求获取'+this.$route.params.sku+'的数据');
    this.name = this.$route.params.sku;
    this.price = this.$route.params.price;
  },
  // 方案一：通过watch监听路由变化
  watch: {
    $route(val) {
      console.log(val);
      this.name = val.params.sku;
      this.price = val.params.price;
    }
  },
  // 方案二：用来解决动态路由组件复用时钩子函数不再执行的问题
  // beforeRouteUpdate (to, from, next) {
  //   this.name = to.params.sku;
  //   this.price = to.params.price;
  //   next()
  // }
  methods: {
    go() {
      this.$router.push('/goodsdetail/oneplus/5599')
    }
  }
}
</script>

<style>

</style>